<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 promise 完成多次 ajax 请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        //先请求到 monster.json
        //1. 创建 Promise 对象
        //2. 构造函数传入一个箭头函数
        //3. (resolve, reject) 参数列表 resolve: 如果请求成功, 调用 resolve 函数
        //4. 如果请求失败, 调用 reject 函数
        //5. 箭头函数体, 仍然是通过 jquery 发出 ajax
        let p = new Promise((resolve, reject) => {
            //发出 ajax
            $.ajax({
                url: "data/monster.json",
                success(resultData) {//成功的回调函数
                    console.log("promise 发 出 的 第 1 次 ajax monster 基 本 信 息 =", resultData);
                    resolve(resultData);//这个地方很关键
                    // 后面的p.then((resultData)中的resultData就是通过这个函数传递过去的，
                    // 并且如果没有调用这个函数,后面的then()中的函数不会再被执行
                }, error(err) {
                    //console.log("promise 1 发出的异步请求异常=", err);
                    reject(err);//有了这一句，才能被后面的catch所捕获到
                    //并且后面的ajax请求肯定不会执行了，直接去执行catch中的代码块
                }
            })
        })
        //这里我们可以继续编写请求成功后的业务
        p.then((resultData) => {
            //这里我们可以继续发出请求
            console.log("p.then 得到 resultData", resultData);
            //这边的return是后面 .then((resultData)的根本
            //这边返回了一个promise对象
            //所以就相当于promise对象.then((resultData))
            //就和上面的p.then((resultData) 是一样的 这里的p就是上面创建的premise对象
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,
                    success(resultData) { //第 2 次 ajax 请求成功,回调函数
                        console.log(" 第 2 次 ajax 请 求 monster的详细信息 =", resultData);
                        //继续进行下一次的请求
                        resolve(resultData);
                    }, error(err) { //第 2 次 ajax 请求失败,回调函数
                        //console.log("promise2 发出的异步请求异常=", err);
                        reject(err);
                    }
                })
            })
        }).then((resultData) => {
            console.log("p.then().then(), resultData", resultData)
            //即可以在这里发出第 3 次 ajax 请求=》 获取该妖怪的女友
            //如果需要再发出一个ajax请求，就需要return new Promise((resolve, reject)
            //或者是要统一处理error（即catch(error)）
            return  new Promise((resolve, reject)=>{
                $.ajax({
                    url: `data/monster_gf_${resultData.gfid}.json`,
                    success(resultData) { //第 3 次 ajax 请求成功,回调函数
                        console.log("第 3 次 ajax 请求monster女友的详细信息=", resultData);
                        //继续进行下一次的请求
                        //resolve(resultData);
                    }, error(err) { //第 3 次 ajax 请求失败,回调函数
                        //console.log("我在这", err);
                        reject(err);//如果想要出异常被catch抓住，这里就要写这个方法
                    }
                })
            })
        }).then((resultData) => {
            console.log("p.then().then().then(), resultData", resultData)
        }).catch((err) => { //这里可以对多次 ajax 请求的异常进行处理
            console.log("promise 异步请求异常=", err);
        })

    </script>
</head>
<body>

</body>
</html>